<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生操作</title>
    <style>
        table{
            border: darkcyan;
            width: 400px;
            border-collapse: collapse;
        }
        th,td{
            border: 1px solid darkcyan;
            text-align: center;

        }
        aside>div{
            line-height: 30px;
            width: 400px;
            text-align: right;
        }
        input[type=button]{
            background-color: darkgrey;
        }
       .box{
           position: absolute;
           left: 0; top: 0;
           text-align: center;
           width: 100%;height: 100%;
           background-color: rgba(214, 214, 214, 0.7);
           visibility: hidden;
       }
    </style>
    <script src="students.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.onload = function (){
            fullTable(studentArray);
        }
        function fullTable(studentArray){
            let str ="";
            studentArray.forEach(s =>
            {str+=`<tr><td>${s.code}</td><td>${s.name}</td><td>${s.age}</td><td>
            <input type="button" value="删除" onclick="delStudent(${s.code})">
            <input type="button" value="修改" onclick="showUpdate(${s.code})">
            </td></tr>`}
            );
            $("body").innerHTML=str;
        }
        function showFind(){
            let array = studentArray.filter(s => s.name.indexOf($("name").value) !== -1);
            fullTable(array);
        }
        function addStudent(){
            $("add").style.visibility="visible";
        }

        /**
         * 确认添加学生
         */
        function confirmAdd(){
            // let student = document.createElement("tr");
            // student.innerHTML="<td>"+$("scode").value+"</td>"+"<td>"+$("sname").value+"</td>"+"<td>"+$("sage").value+"</td>";
            // $("body").append(student);

            let student = {code:$("code").value,name:$("sname").value,age:$("sage").value};
            studentArray.push(student);
            fullTable(studentArray);
            $("add").style.visibility="hidden";
        }

        /**
         * 确认修改学生信息
         */
        function confirmUpdate(){
            let student = studentArray.find(s => s.code==$("codeSpan").innerText);
            student.age = $("age").value;
            fullTable(studentArray);
            $("update").style.visibility="hidden";
        }

        /**
         * 招式学生信息
         * @param code 学生的学号
         */
        function showUpdate(code){
            console.log("学生学号    ："+code);
            let student = studentArray.find(s => s.code==code);
            $("codeSpan").innerText=student.code;
            $("nameSpan").innerText=student.name;
            $("age").value=student.age;
            $("update").style.visibility="visible";
        }

        /**
         * 删除学生
         * @param code 学生学号
         */
        function delStudent(code){
            let index = studentArray.findIndex(s => s.code==code);
            studentArray.splice(index,1);
            fullTable(studentArray);
        }
    </script>
</head>
<body>
<article>
    <aside>
        <table>
            <thead><tr><th>学号</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead>
            <tbody id="body"></tbody>
        </table>
            <div>
                姓名：<input type="text" id="name"> <br>
                <input type="button" value="添加学生" onclick="addStudent()">
                <input type="button" value="查询" onclick="showFind()">
            </div>
    </aside>
<!--    这个用于添加学生和修改学生-->
        <div id="add" class="box">
            学号： <input type="text" id="code"> <br><br>
            姓名： <input type="text" id="sname"> <br><br>
            年龄： <input type="text" id="sage"> <br><br>
            &nbsp;&nbsp;&nbsp; <input type="button" value="确认" onclick="confirmAdd()">
        </div>
    <div class="box" id="update">
        学号：<span id="codeSpan"></span> &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;<br><br>
        姓名：<span id="nameSpan"></span> &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <br><br>
        年龄：<input type="text" id="age"><br><br>
        &nbsp; &nbsp;&nbsp; <input type="button" value="确认" onclick="confirmUpdate()">
    </div>

</article>
</body>
</html>